<template>
	<view class="controlView">
		<view class="control_window_box">
			<view id="message">
				<img id="img" :src="src" />
			</view>
		</view>
		<view class="control_btn">
			<view class="btn_top">
				<button class="btn" @click="sendWebsoket('turnTop')">↑</button>
			</view>
			<view class="btn_left_right">
				<button class="btn" @click="sendWebsoket('turnLeft')"> ← </button>
				<button class="btn" @click="sendWebsoket('turnRight')"> →</button>
			</view>
			<view class="btn_bottom">
				<button class="btn" @click="sendWebsoket('turnDown')">↓</button>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	const api = require('@/utils/api.js');
	export default {
		data() {
			return {
				src: '',
				websocket: null,
				isOpenSocket: false,
				direction: {
					x: 0,
					y: 0
				},
				openId: undefined
			}
		},
		methods: {
			concentScoketInit() {
				this.websocket = uni.connectSocket({
					url: 'ws://localhost:8082/websocket',
					success(data) {
						console.log('连接成功！')
					}
				});

				this.websocket.onOpen(res => {
					console.log('webscoket打开成功！')
					this.isOpenSocket = true
					this.websocket.onMessage((res) => {
						if (typeof(res.data) === "string") {
							// console.log(res)
							this.openId = res.data
							// 开始播放
							uni.request({
								url: util.domain + api.StartPlayVideo,
								method: 'get',
								data: {
									sessionId: this.openId
								}
							})
						} else {
							// var reader = new FileReader();
							// reader.onload = function(evt) {
							// 	if (evt.target.readyState == FileReader.DONE) {
							// 		var url = evt.target.result;
							// 		// alert(url);
							// 		// setIconInnerHTML(url)
							// 		this.src = url
							// 	}
							// }
							// console.log(res)
							// reader.readAsArrayBuffer(res.data);
							this.src  ="data:image/png;base64,"+ uni.arrayBufferToBase64(res.data)

						}

					})
				})
				this.websocket.onClose(() => {
					console.log('关闭webscoket')
				})
			},
			closeScoket() {
				this.websocket.close({
					success(res) {
						this.isOpenSocket = false
						console.log('关闭成功', res)
					},
					fail(res) {
						console.log('关闭失败', res)
					}
				})
			},
			sendWebsoket(value) {
				switch (value) {
					case 'turnTop':
						this.direction.y -= 1
						break;
					case 'turnLeft':
						this.direction.x -= 1
						break;
					case 'turnRight':
						this.direction.x += 1
						break;
					case 'turnDown':
						this.direction.y += 1
						break;
					default:
						break;
				}
				uni.request({
					url: util.domain + api.MoveDirection,
					method: 'get',
					data: this.direction
				})
			}
		},
		created() {
			this.concentScoketInit()
		},
		beforeDestroy() {
			this.closeScoket()
		}
	}
</script>

<style lang="scss">
	.controlView {
		overflow: hidden;

		.control_window_box {
			height: 500rpx;
			background-color: #007AFF;
			margin-bottom: 20rpx;
		}

		.message {
			image {
				width: 100%;
				height: 100%;
			}
		}

		.control_btn {
			display: flex;
			flex-direction: column;
			width: 260rpx;
			height: 260rpx;
			line-height: 260rpx;
			background-color: #777777;
			margin: 0 auto;
			border-radius: 50%;
			overflow: hidden;

			.btn_top,
			.btn_bottom {
				margin: 0 auto;
				border-radius: 50%;
			}

			.btn {
				background-color: #777777 !important;
			}
		}

		.btn_left_right {
			width: 100%;
			display: flex;
		}
	}
</style>
